﻿<!DOCTYPE html>
<html>
  <head>
    <title>商品列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1366, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="/assets/plugins/elementui/index.css">-->
    <link rel="stylesheet" href="/assets/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/style.css">
    <!-- 引入组件库 -->
    <script src="../assets/js/vue.js"></script>
    <script type="text/javascript" src="../assets/js/jquery.min.js"></script>
    <!--<script src="/assets/plugins/elementui/index.js"></script>-->
    <script src="../assets/js/axios-0.18.0.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../assets/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
      <script src="../assets/element-ui/lib/index.js"></script>
  </head>
  <body>

  <div id="app">
    <div class="content-header">
      <h1>商品管理<small>商品列表</small></h1>

      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div>
        <el-tag>全部商品<em>{{goodsStatic.all}}</em></el-tag>
        <el-tag type="success">已上架<em>{{goodsStatic.marketable}}</em></el-tag>
        <el-tag type="info">未上架<em>{{goodsStatic.unmarketable}}</em></el-tag>
        <el-tag type="success">审核通过<em>{{goodsStatic.audit}}</em></el-tag>
        <el-tag type="warning">待审核<em>{{goodsStatic.toaudit}}</em></el-tag>
        <el-tag type="danger">审核未通过<em>{{goodsStatic.unaudit}}</em></el-tag>
      </div>

      <div class="box">

        <div class="filter-container">
          <small>输入搜索：</small>
              <el-input size="mini" placeholder="商品名称/商品货号" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>

          <small>商品分类：</small>
              <el-cascader size="mini"
                @change="categoryChange"
                :options="categoryOptions"
                :props="{ checkStrictly: true }"
                clearable></el-cascader>

          <small>商品品牌：</small>
          <el-select size="mini" v-model="pagination.brandId" clearable placeholder="请选择商品品牌">
            <el-option
                    v-for="item in brandOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>


          <el-button @click="pagination.currentPage=1;findPage();" class="dalfBut">查询</el-button>
          <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
        </div>


        <el-table size="small" current-row-key="id"
                  :data="dataList" stripe highlight-current-row>
          <el-table-column prop="sn" align="center" label="商品货号"></el-table-column>
          <el-table-column  label="商品图片" align="center">
              <template slot-scope="scope">
                  <el-image
                          style="width: 100px; height: 100px"
                          :src="scope.row.image"
                          :fit="fit"></el-image>
              </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>

          <el-table-column prop="brand" label="所属品牌" align="center"></el-table-column>
          <el-table-column prop="category" label="所属分类" align="center"></el-table-column>
          <el-table-column prop="remark" label="上架状态" align="center">
            <template slot-scope="scope">
              {{scope.row.isMarketable?'已上架：':'未上架：'}}
              <el-switch disabled
                      v-model="scope.row.isMarketable"
                     >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="审核状态" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">

                <el-button v-if="scope.row.status!='审核通过'" type="success" icon="el-icon-edit-outline" size="mini" @click="toAudit(scope.row)">审核</el-button>
                <el-button size="mini" icon="el-icon-shopping-cart-full" type="warning" @click="toMarket(scope.row)">上下架</el-button>
                <el-button size="mini" icon="el-icon-shopping-cart-full" type="danger" @click="handleDelete(scope.row)">删除</el-button>

            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-conta iner">
          <el-pagination
                  class="pagiantion"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.currentPage"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pagination.pageSize"
                  layout="total,sizes,prev, pager, next, jumper"
                  :total="pagination.total">
          </el-pagination>
        </div>
        <!-- 上下架窗口 -->
        <div class="add-form">
              <el-dialog title="商品上下架" :visible.sync="dialogForMarket">
                  <el-form ref="dataEditForm" :model="marketData" :rules="rules" label-position="right" label-width="100px">
                      <el-row>
                          <el-col :span="24">
                              <el-form-item label="商品名称：   ">
                                  <font color="#a9a9a9">{{goodName}}</font>
                              </el-form-item>
                          </el-col>
                      </el-row>
                      <el-row>
                          <el-col :span="24">
                              <el-form-item label="商品上下架" prop="name">
                                  <el-radio v-model="marketData.marketable" label="1">上架</el-radio>
                                  <el-radio v-model="marketData.marketable" label="2">下架</el-radio>
                              </el-form-item>
                          </el-col>
                      </el-row>
                      <el-row>
                          <el-col :span="24">
                              <el-form-item label="反馈详情">
                                  <el-input v-model="marketData.remark" rows="5" type="textarea"></el-input>
                              </el-form-item>
                          </el-col>
                      </el-row>
                  </el-form>

                  <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogForMarket = false">取消</el-button>
                      <el-button type="primary" @click="handleMarket()">确定</el-button>
                  </div>
              </el-dialog>
          </div>

        <!-- 审核窗口 -->
        <div class="add-form">
          <el-dialog title="编辑检查项" :visible.sync="dialogForAudit">
            <el-form ref="dataEditForm" :model="auditData" :rules="rules" label-position="right" label-width="100px">
                <el-row>
                <el-col :span="24">
                  <el-form-item label="商品名称：   ">
                       <font color="#a9a9a9">{{goodName}}</font>
                  </el-form-item>
                </el-col>
              </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="商品审核" prop="name">
                            <el-radio v-model="auditData.audit" label="1">审核通过</el-radio>
                            <el-radio v-model="auditData.audit" label="2">审核驳回</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                <el-col :span="24">
                  <el-form-item label="反馈详情">
                    <el-input v-model="auditData.remark" rows="5" type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogForAudit = false">取消</el-button>
              <el-button type="primary" @click="handleAudit()">确定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>


    <script>
      var vue = new Vue({
        el: '#app',
        data:{
          pagination: {//分页相关模型数据
            currentPage: 1,//当前页码
            pageSize:10,//每页显示的记录数
            total:0,//总记录数
            queryString:null,//查询条件
            categoty1Id:null,//商品一级分类id
            categoty2Id:null,//商品二级分类id
            categoty3Id:null,//商品三级分类id
            brandId:null //商品品牌id
          },
          goodName:"",  
          goodsStatic:{},//商品统计数据
          dataList: [],//当前页要展示的分页列表数据
          auditData: {},//审核数据
          marketData:{},//上下架数据
          dialogForMarket: false,//上下架窗口可见性
          dialogForAudit:false,//审核窗口可见性
          rules: {//校验规则
            code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
            name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
          },

          categoryOptions:[],

          brandOptions: [] //所有品牌数据
        },
        //钩子函数，VUE对象初始化完成后自动执行  window.onload   $(function(){  });
        created() {
          this.findPage();
          this.goodsStatistics();
          this.queryBrands();
          this.queryCategory();
        },
        methods: {
          //查询所有分类数据
          queryCategory(){
            axios.post("/data/categoryList.json")
                    .then((res)=>{
                      if(res.data.flag){
                        this.categoryOptions = res.data.data;
                      }else {
                        this.$message.error(res.data.message);
                      }
                    });
          },
          //查询所有品牌数据
          queryBrands(){
            axios.post("/data/brandList.json")
                    .then((res)=>{
                      if(res.data.flag){
                        this.brandOptions = res.data.data;
                      }else {
                        this.$message.error(res.data.message);
                      }
                    });

          },
          //查询商品统计信息
          goodsStatistics(){
            axios.post("/data/goodsStatistics.json")
                    .then((res)=>{
                        if(res.data.flag){
                          this.goodsStatic = res.data.data;
                        }else {
                          this.$message.error(res.data.message);
                        }
                    });
          },

          //选中商品分类：
          categoryChange(value){
            this.pagination.categoty1Id=value[0]?value[0]:null;
            this.pagination.categoty2Id=value[1]?value[1]:null;
            this.pagination.categoty3Id=value[2]?value[2]:null;
          },
            // 弹出审核窗口
            toAudit(row) {
                this.dialogForAudit = true;
                this.auditData.id = row.id;
                this.goodName=row.name;
            },
          //审核
          handleAudit() {
              // 发送请求获取检查项信息  {id:11,audit:1,remark:'2121'}
              axios.post("/data/goodAudit.json",this.auditData)
                  .then((res)=>{
                      if(res.data.flag){
                          this.$message.success(res.data.message);
                          this.dialogForAudit=false;
                          this.findPage();
                          this.goodsStatistics();
                      }else{
                          this.$message.error(res.data.message);
                      }
                  });
          },
            // 弹出上下架窗口
            toMarket(row) {
                this.dialogForMarket = true;
                this.marketData.id = row.id;
                this.goodName=row.name;
            },
          //上下架
          handleMarket() {
              // 发送请求获取检查项信息  {id:11,marketable:1,remark:'2121'}
              axios.post("/data/goodMarket.json",this.marketData)
                  .then((res)=>{
                      if(res.data.flag){
                          this.$message.success(res.data.message);
                          this.dialogForMarket=false;
                          this.findPage();
                          this.goodsStatistics();
                      }else{
                          this.$message.error(res.data.message);
                      }
                  });
          },

          //分页查询
          findPage() {
            //请求后台
            axios.post("/data/goodsList.json",this.pagination).then((response)=> {
              //为模型数据赋值，基于VUE的双向绑定展示到页面
              this.dataList = response.data.rows;
              this.pagination.total = response.data.total;
            });

          },
          // 重置表单
          resetForm() {
          },

          //跳转到添加商品页面
          handleCreate() {
            window.location.href="goods_choose_category.html";
          },

          //切换页大小
          handleSizeChange(val){
            // 5 10  15  20
            this.pagination.pageSize = val;
            this.findPage();
          },
          //切换页码
          handleCurrentChange(currentPage) {
            this.pagination.currentPage = currentPage;
            this.findPage();
          },
          // 删除
          handleDelete(row) {
            this.$confirm("确认删除吗？","提示",{type:'warning'}).then(()=>{
              axios.post("/data/goodDelete.json?id=" + row.id).then((res)=> {
                if(!res.data.flag){
                    this.$message.error(res.data.message);
                }else{
                    this.$message.success(res.data.message);
                    this.findPage();
                    this.goodsStatistics();
                }
              });
            });
          }
        }
      })
    </script>
  </body>
</html>
